﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>ResonateJS</title>
    <link href="/css/currentStyle.css" rel="stylesheet" />
    <script src="dist/resonate.js" resonate-routing="clean"></script>
    <script src="dist/main.js"></script>
</head>
<body>
    <div id="main">
        <div class="container">
            <div class="jumbotron">
                <div class="row">
                    <div class="col-md-6">
                        <h1>ResonateJS</h1>
                    </div>
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-sm-6 smallpad">
                                <button type="button" class="btn btn-primary btn-block" id="run" onclick="{run()}">Create 1,000 rows</button>
                            </div>
                            <div class="col-sm-6 smallpad">
                                <button type="button" class="btn btn-primary btn-block" id="runlots" onclick="{runLots()}">Create 10,000 rows</button>
                            </div>
                            <div class="col-sm-6 smallpad">
                                <button type="button" class="btn btn-primary btn-block" id="add" onclick="{add()}">Append 1,000 rows</button>
                            </div>
                            <div class="col-sm-6 smallpad">
                                <button type="button" class="btn btn-primary btn-block" id="update" onclick="{update()}">Update every 10th row</button>
                            </div>
                            <div class="col-sm-6 smallpad">
                                <button type="button" class="btn btn-primary btn-block" id="clear" onclick="{clear()}">Clear</button>
                            </div>
                            <div class="col-sm-6 smallpad">
                                <button type="button" class="btn btn-primary btn-block" id="swaprows" onclick="{swapRows()}">Swap Rows</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table table-hover table-striped test-data">
                <tbody>
                    <tr foreach="{item in data}" class="{{'danger': $index === selected }}">
                        <td class="col-md-1">{item.id}</td>
                        <td class="col-md-4"><a onclick="{selectRow($index)}">{item.label}</a></td>
                        <td class="col-md-1"><a onclick="{removeRow($index)}"><span class="remove glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
                        <td class="col-md-6"></td>
                    </tr>
                </tbody>
            </table>
            <span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
        </div>
    </div>
</body>
</html>
